<!--
 * @Date: 2022-03-18 15:42:16
 * @Author: 陶子
 * @LastEditTime: 2022-04-02 15:35:35
 * @FilePath: \jk_one-stop_pc\src\views\managementSettings\onlyOneClass.vue
 * @pageName: 这是--()--页面
-->
<template>
  <div class="wrap">
    <div class="btnBox">
      <a-button style="margin-right:10px" @click="showResetModal"> 恢复初始化设置 </a-button>
      <a-button type="primary" @click="addBtn">+新增 </a-button>
    </div>
    <div class="natiueHeader">
      <div class="headerLeft">字典值</div>
      <div class="headerRight">操作</div>
    </div>
    <div class="subBox">
      <draggable v-model="classList" chosen-class="chosen" force-fallback="true" handle=".fatherDrag" group="currentClass" animation="800" @start="onStart" @end="onEnd">
        <transition-group type="transition" :name="!drag ? 'flip-list' : null">
          <div class="itemBox" v-for="item in classList" :key="item.id">
            <div class="itemLeft">
              <div class="fatherDrag">
                <img src="~@/assets/img/drag.png" class="dragPng" alt="">
              </div>
              <div class="itemName">{{item.itemText }}</div>
            </div>
            <div class="actionBox">
              <div class="btn-text" @click="editItem(item)">编辑</div>
              <div class="middleLine"></div>
              <div class="btn-text" @click="showDelete(item)">删除</div>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
    <a-modal v-model="showDialog" :title="sureBtnType==1?'新增':'编辑'" @ok='dialogConfirm'>
      <a-form-model ref="dictForm" :model="dictForm" :rules="rules">
        <a-form-model-item label="字典名称" prop='content'>
          <a-input v-model="dictForm.content" :maxLength="15" style="width:260px" placeholder="请输入" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import {
  getDictTextApi,
  resetPubDictApi,
  pubDictAddApi,
  pubDictEditApi,
  pubDictDeleteApi,
  dictSortApi,
} from '@/api/erpApi'
export default {
  data() {
    return {
      showDialog: false,
      deleteDialog: false,
      drag: false,
      classList: [], //列表数据
      itemInfo: {},
      sureBtnType: 1, // 1为新增；2为编辑
      productText: '',
      dictForm: {
        content: '',
      },
      rules: {
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      treeId: '',
      type: '',
    }
  },
  components: {
    draggable,
  },
  created() {},

  methods: {
    showData(treeId, type) {
      this.treeId = treeId
      this.type = type
      this.getData()
    },
    showResetModal() {
      let that = this
      that.$antdConfirm({
        title: '确定恢复初始化设置吗？',
        content: '恢复初始化设置将清除您所有的自定义配置',
        cancelText: '不恢复',
        okText: '恢复',
        onOk() {
          console.log('这是恢复')
          let resetObj = {
            dictType: 'dict',
            id: that.treeId,
          }
          resetPubDictApi(resetObj).then((res) => {
            if (res.success) {
              that.getData()
            } else {
              that.$antdMessage.warning(res.message)
            }
          })
        },
      })
    },
    getData() {
      this.classList = []
      let obj = {
        id: this.treeId,
        type: this.type,
      }
      getDictTextApi(obj).then((res) => {
        if (res.success) {
          this.classList = res.result
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    //点击当前条数据后去往详情页面
    onStart() {
      this.drag = true
    },
    onEnd() {
      this.drag = false
      console.log('结束了：', this.classList)
      let str = ''
      for (let item of this.classList) {
        str += item.id + ','
      }
      let ids = str.substring(0, str.length - 1)
      let dragObj = {
        ids: ids,
        dictType: 'dict',
      }
      dictSortApi(dragObj).then((res) => {
        if (!res.success) {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    showDelete(item) {
      this.itemInfo = item
      let that = this
      that.$antdConfirm({
        title: '确定删除此字典值吗',
        onOk() {
          console.log('确定删除')
          let deleteObj = {
            id: that.itemInfo.id,
          }
          pubDictDeleteApi(deleteObj).then((res) => {
            if (res.code == 200) {
              that.getData()
              that.$antdMessage.success(res.message)
            } else {
              that.$antdMessage.warning(res.message)
            }
          })
        },
      })
    },

    editItem(item) {
      this.itemInfo = item
      console.log('修改操作', item)
      this.sureBtnType = 2
      this.dictForm.content = item.itemText
      this.showDialog = true
    },
    addBtn() {
      this.sureBtnType = 1
      this.dictForm.content = ''
      this.showDialog = true
    },
    dialogConfirm() {
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          console.log(this.dictForm.content)
          // 1为新增；2为编辑
          if (this.sureBtnType == 1) {
            let addObj = {
              dictId: this.treeId,
              itemText: this.dictForm.content,
            }
            pubDictAddApi(addObj).then((res) => {
              if (res.code == 200) {
                this.$antdMessage.success(res.message)
                this.getData()
              } else {
                this.$antdMessage.warning(res.message)
              }
              this.showDialog = false
            })
          } else {
            let editObj = {
              dictId: '',
              id: '',
            }
            for (let i in editObj) {
              editObj[i] = this.itemInfo[i]
            }
            editObj.itemText = this.dictForm.content
            pubDictEditApi(editObj).then((res) => {
              if (res.code == 200) {
                this.$antdMessage.success(res.message)
                this.getData()
              } else {
                this.$antdMessage.warning(res.message)
              }
              this.showDialog = false
            })
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang='less' scoped>
@import '~@/assets/less/public.less';
.natiueHeader {
  width: 100%;
  height: 44px;
  background: #f4f5f6;
  box-sizing: border-box;
  padding: 0 140px 0 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerLeft {
    font-size: 14px;
    color: #444444;
  }
  .headerRight {
    font-size: 14px;
    color: #444444;
  }
}
.actionBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 152px;
  .middleLine {
    width: 1px;
    height: 12px;
    background: #eeeeee;
    margin: 0 8px;
  }
}
.wrap {
  background: #ffffff;
  width: 100%;
  .add {
    color: #1890ff;
  }
}
.btnBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
.wrap p {
  margin: 0;
}
/* 列表 */

.subBox {
  box-sizing: border-box;
  padding: 0 16px;
  background: #ffffff;
  height: calc(100vh - 280px);
  overflow: auto;
  .itemBox {
    box-sizing: border-box;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .itemLeft {
      font-size: 15px;
      color: #333333;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .fatherDrag {
        width: 27px;
        height: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 10px;
        .dragPng {
          width: 15px;
          height: 15px;
          cursor: move;
        }
      }

      .itemName {
        // margin-left: 0.12rem;
      }
    }

    .deletePng {
      width: 15px;
      height: 15px;
    }
  }
}

.flip-list-move {
  transition: transform 0.5s;
}
.chosen {
  border: solid 2px #3089dc !important;
}
.no-move {
  transition: transform 0s;
}
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
/deep/.ant-form-item {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  .ant-form-item-label {
    width: 90px;
    text-align: left;
    &::after {
      content: ':';
    }
  }
}
</style>
